import React, { Component } from "react";
import PubSub from "pubsub-js";
import store from "../../redux/store";
import "./index.css";
import { byBoxAction } from "../../redux/actions/item";
import NodeChart from "../Node";
import TreeChart from "../Tree";
import BoxChart from "../Box";
export default class Item extends Component {
  state = { chartData: "" };
  svgRef = React.createRef();
  componentDidMount() {
    this.token1 = PubSub.subscribe("boxmap", (msg, data) => {
      this.setState({ chartData: data });
    });
    this.token2 = PubSub.subscribe("treemap", (msg, data) => {
      this.setState({ chartData: data });
    });
    this.token3 = PubSub.subscribe("nodemap", (msg, data) => {
      this.setState({ chartData: data });
    });
    console.log(this.state.chartData);
  }
  componentWillUnmount() {
    PubSub.unsubscribe(this.token1);
    PubSub.unsubscribe(this.token2);
    PubSub.unsubscribe(this.token3);
  }
  detailChart = (e) => {
    const textContent = e.target.textContent;
    store.dispatch(byBoxAction(textContent));
    PubSub.publish("open", true);
  };
  nodeChartClick = (data) => {
    console.log("Item中的", data);
    store.dispatch(byBoxAction(data));
    PubSub.publish("open", true);
  };
  render() {
    const { chartData } = this.state;
    return (
      <div className="container">
        {/* <div onClick={this.detailChart}>
          {chartData ? chartData : "boxmap"}1
        </div>
        <div onClick={this.detailChart}>
          {chartData ? chartData : "boxmap"}2
        </div> */}
        {chartData === "boxmap" || chartData === "" ? <BoxChart /> : null}
        {chartData === "treemap" ? <TreeChart /> : null}
        {chartData === "nodemap" ? (
          <NodeChart detailNode={this.nodeChartClick} />
        ) : null}
      </div>
    );
  }
}
